<template>
  <div>

    <el-table :data="param.dateTable">
      <el-table-column label="还箱单号" width="220">
        <template v-slot="scope">
          <el-button link @click="handleChoice(scope.row)" style="color:#409EFF;">{{ scope.row.returnBoxNo
            }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="yardName" label="堆场名称"> </el-table-column>
      <el-table-column prop="boxType" label="箱型"> </el-table-column>
      <el-table-column label="剩余还箱天数" width="120">
        <template v-slot="scope">
          <span style="color:#66CD00;font-size: 18px;">{{ scope.row.residueReturnDays }}</span> &nbsp;天
        </template>
      </el-table-column>
      <el-table-column prop="returnValidityPeriod" min-width="200" label="还箱单有效期范围"> </el-table-column>
      <el-table-column prop="agentName" label="客户" min-width="200"> </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
    </el-table>
    <!-- 还箱单信息 -->
    <huanxiangdanInfo ref="huanxiangdanInfoRef" @huanxiangdanInfoClick="hxClick"  @huanxiangdanInfoListClick="handleShowRecord"></huanxiangdanInfo>
    <!-- 还箱记录 -->
    <el-dialog v-model="param.dialogVisiblePackingRecord">
      <packingRecord ref="packingRecordRef" :oprName="'huanXiang'" :rowData="packing"></packingRecord>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils'
import { onMounted, ref, watch } from 'vue';
import { getReturnListById, getReturnData } from '@/api/orderManage/returnBox'
import yardInfo from '@/views/components/boxYard/yardInfo.vue'
import packingRecord from '@/views/components/tiXiangManage/packingRecord.vue'
import { getTable } from '@/api/orderManage/returnBoxDetail'
import { ElMessage } from 'element-plus';
import huanxiangdanInfo from '@/views/components/order/huanxiangdanInfo.vue';
// const emit = defineEmits(['handleClose'])
const param = ref({
  dialogVisible: false,
  containerNoArry: [],
  orderTable: [],
  packingRecordList: []
})
const props = defineProps({
  orderId: {
    type: String,
    default: ''
  },
  rowData: {
    type: Object,
    default: () => { }
  },
})

onMounted(() => {
  showReturn()
})

//查看 回调huan箱单 列表
const showReturn = () => {
  //orderType 5-租箱 10-回调
  getReturnListById(props.orderId, 10).then((res: any) => {
    param.value.dateTable = res.data
    param.value.dateTable.forEach(item => {
      item.boxType = boxTypeFilter(item.boxType)
      item.returnValidityPeriod = formatDate(item.returnValidityPeriodStart, 2) + ' ~ ' + formatDate(item.returnValidityPeriodEnd, 2)
      item.status = statusFilter(item.returnBoxStatus)
    })
  })
}

const packingRecordRef = ref({ showRecord: function () { } })
const handleShowRecord = (val) => {
  packing.value=val
  packingRecordRef.value.showRecord()
  param.value.dialogVisiblePackingRecord = true
}

//查看 还箱单 列表详情

const packing = ref({})
//提箱单信息
const huanxiangdanInfoRef=ref()
const handleChoice = (row: any) => {
  if (!row.returnBoxId) {
    return ElMessage({ message: '暂无还箱单id信息', type: 'error' })
  }
  huanxiangdanInfoRef.value.openBox(row.returnBoxId)
}

//提箱单信息关闭回调
const hxClick=(val)=>{
  packing.value=val
  props.rowData.totalQuantity = packing.value.totalQuantity
    props.rowData.packedQuantity = packing.value.packedQuantity
    props.rowData.packingNo = packing.value.packingNo
}

//过滤
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

const boxTypeFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

const statusFilter = (val: any) => {
  // let status: any = { 5: '已下单', 10: '待提未付', 15: '已提未付', 20: '待还未付', 25: '待还已付', 30: '已完成', 35: '已取消' }
  let status: any = { 5: '已发放', 10: '已下载', 15: '还箱中', 20: '已完成' }
  return status[val]
}


defineExpose({
  showReturn
})

</script>
